<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/login.css" rel="stylesheet">
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 200px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: left;
            line-height: 20px;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }

        .left2{
            text-align: left;
            font-size: 20px;
            float: left;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header class="el-header">
            <span class="left2" @click="exit"><i  class="el-icon-switch-button">退出登录</i></span>
            <span class="title">超市进货系统</span>
            <span class="message"><i  class="el-icon-user"></i>{{role}}</span>
        </el-header>

            <el-main>
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                    <el-menu-item index="1">进退货物</el-menu-item>
                    <el-menu-item index="2">库存管理</el-menu-item>
                    <el-menu-item index="3" >商品管理</el-menu-item>
                    <el-menu-item index="4">查看货单</el-menu-item>
                </el-menu>

                <!--搜索表单-->
                <el-form :inline="true" :model="goods" class="demo-form-inline">

                    <el-form-item label="商品id">
                        <el-input v-model="goods.id" placeholder="商品id"></el-input>
                    </el-form-item>

                    <el-form-item label="商品名称">
                        <el-input v-model="goods.name" placeholder="商品名称"></el-input>
                    </el-form-item>

                    <el-form-item label="商品品类">
                        <el-select v-model="goods.category" placeholder="商品品类">
                            <el-option label="日化" value="日化"></el-option>
                            <el-option label="生鲜" value="生鲜"></el-option>
                            <el-option label="粮油" value="粮油"></el-option>
                            <el-option label="饮料" value="饮料"></el-option>
                            <el-option label="体闲百货" value="体闲百货"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>

                <el-dialog title="选择供应商" :visible.sync="dialogTableVisible">
                    <el-table :data="gridData">
                        <el-table-column property="gname" label="商品名称" width="150"></el-table-column>
                        <el-table-column property="sname" label="供应商" width="200"></el-table-column>
                        <el-table-column property="price" label="价格（元）"></el-table-column>
                        <el-table-column
                                align="center"
                                label="操作">

                            <template slot-scope="scope">
                                <el-button type="success" @click="buy(scope.row.gid,scope.row.sid,scope.row.price)">进货</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-dialog>

                <el-dialog title="选择供应商" :visible.sync="dialogTableVisibleB">
                    <el-table :data="gridData">
                        <el-table-column property="gname" label="商品名称" width="150"></el-table-column>
                        <el-table-column property="sname" label="供应商" width="200"></el-table-column>
                        <el-table-column property="price" label="价格（元）"></el-table-column>
                        <el-table-column
                                align="center"
                                label="操作">

                            <template slot-scope="scope">
                                <el-button type="success" @click="backs(scope.row.gid,scope.row.sid,scope.row.price)">退货</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-dialog>

                <el-dialog title="请输入货物数量" :visible.sync="dialogFormVisible">
                    <el-form :model="form">
                        <el-form-item label="货物数量" :label-width="formLabelWidth">
                            <el-input v-model="form.num" autocomplete="off"></el-input>
                        </el-form-item>

                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="buys">确 定</el-button>
                    </div>
                </el-dialog>

                <el-dialog title="请输入货物数量" :visible.sync="dialogFormVisibleB">
                    <el-form :model="form">
                        <el-form-item label="货物数量" :label-width="formLabelWidth">
                            <el-input v-model="form.num" autocomplete="off"></el-input>
                        </el-form-item>

                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="backb">确 定</el-button>
                    </div>
                </el-dialog>

                <template>
                    <el-table
                            :data="tableData"
                            style="width: 100%"
                            :row-class-name="tableRowClassName"
                            >


                        <el-table-column
                                prop="id"
                                label="商品id"
                                align="center"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="商品名"
                                align="center"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="category"
                                align="center"
                                label="品类">
                        </el-table-column>
                        <el-table-column
                                prop="number"
                                align="center"
                                label="库存数量">
                        </el-table-column>
                        <el-table-column
                                prop="unit"
                                align="center"
                                label="单位">
                        </el-table-column>

                        <el-table-column
                                align="center"
                                label="操作">
                            <template slot-scope="scope">
                                <el-button type="success" @click="purchase(scope.row.id)">进货</el-button>
                                <el-button type="danger" @click="backg(scope.row.id)">退货</el-button>
                            </template>

                        </el-table-column>

                    </el-table>
                </template>


                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="5"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalCount">
                </el-pagination>

            </el-main>

        <el-footer>Footer</el-footer>
    </el-container>
</div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>

<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script src="js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                activeIndex: '1',
                role:'',
                id:'',
                aarole: '',
                gridData: [],
                dialogTableVisible: false,
                dialogTableVisibleB: false,
                goods:{
                    id:'',
                    name:'',
                    category:'',
                    number:'',
                    unit:''
                },
                dialogFormVisible: false,
                dialogFormVisibleB: false,
                form: {
                    id:'',
                    flag:'',
                    gname:'',
                    sname:'',
                    createTime:'',
                    tprice:'',
                    gid:'',
                    sid:'',
                    price:'',
                    num:''
                },
                formLabelWidth: '120px',

                brand: {
                    status: '',
                    brandName: '',
                    companyName: '',
                    id: "",
                    ordered: "",
                    description: ""
                },

                // 每页显示的条数
                pageSize:5,
                // 总记录数
                totalCount:100,
                // 当前页码
                currentPage: 1,
                tableData: [{
                    id: '1',
                    name: '牙刷',
                    category: '日化',
                    number: "30",
                    unit:'个'
                }, {
                    id: '1',
                    name: '牙刷',
                    category: '日化',
                    number: "30",
                    unit:'个'
                }, {
                    id: '1',
                    name: '牙刷',
                    category: '日化',
                    number: "30",
                    unit:'个'
                }]


            }
        },
        mounted(){


            //当页面加载完成后，发送异步请求，获取数据

            this.role=$.cookie("name");
            this.id=$.cookie("id");
            this.selectAll();


        },
        methods: {


            onSubmit() {
                this.selectAll();
            },


            // 查询分页数据
            selectAll(){

                axios({
                    method:"post",
                    url:"http://localhost:8080/superMarket/goods/selectByPageAndCondition?currentPage="+this.currentPage+"&pageSize="+this.pageSize,
                    data:this.goods
                }).then(resp =>{
                    //设置表格数据
                    this.tableData = resp.data.rows; // {rows:[],totalCount:100}
                    //设置总记录数
                    this.totalCount = resp.data.totalCount;

                })


            },
            purchase(e){

                axios({
                    method:"post",
                    url:"http://localhost:8080/superMarket/goods/purchase",
                    data:e
                }).then(resp =>{
                    //设置表格数据
                    this.gridData = resp.data; // {rows:[],totalCount:100}

                })
                this.dialogTableVisible= true;

            },
            backg(e){

                axios({
                    method:"post",
                    url:"http://localhost:8080/superMarket/goods/purchase",
                    data:e
                }).then(resp =>{
                    //设置表格数据
                    this.gridData = resp.data; // {rows:[],totalCount:100}

                })
                this.dialogTableVisibleB= true;

            },

            buy(x,y,z){

                this.form.gid=x;
                this.form.sid=y;
                this.form.price=z;
                this.dialogTableVisible= false;
                this.dialogFormVisible=true;


            },

            backs(x,y,z){

                this.form.gid=x;
                this.form.sid=y;
                this.form.price=z;
                this.dialogTableVisibleB= false;
                this.dialogFormVisibleB=true;


            },
            buys(){
                this.dialogFormVisible=false;
                this.$confirm('是否确认进货信息?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //用户点击确认按钮


                    //2. 发送AJAX请求
                    var _this = this;

                    // 发送ajax请求，添加数据
                    axios({
                        method:"post",
                        url:"http://localhost:8080/superMarket/goods/buys",
                        data:_this.form
                    }).then(function (resp) {
                        if(resp.data == "success"){

                            _this.selectAll();

                            _this.$message({
                                message: '恭喜你，进货成功',
                                type: 'success'
                            });

                        }
                    })
                }).catch(() => {

                    this.$message({
                        type: 'info',
                        message: '已取消进货'
                    });
                });

            },
            backb(){
                this.dialogFormVisibleB=false;
                this.$confirm('是否确认退货信息?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //用户点击确认按钮


                    //2. 发送AJAX请求
                    var _this = this;

                    // 发送ajax请求，添加数据
                    axios({
                        method:"post",
                        url:"http://localhost:8080/superMarket/goods/backb",
                        data:_this.form
                    }).then(function (resp) {
                        if(resp.data == "success"){

                            _this.selectAll();

                            _this.$message({
                                message: '恭喜你，退货成功',
                                type: 'success'
                            });

                        }
                    })
                }).catch(() => {

                    this.$message({
                        type: 'info',
                        message: '已取消退货'
                    });
                });

            },
            exit(){
                window.location.href='';
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            //分页
            handleSizeChange(val) {
                //console.log(`每页 ${val} 条`);
                // 重新设置每页显示的条数
                this.pageSize  = val;
                this.selectAll();
            },
            handleCurrentChange(val) {
                //console.log(`当前页: ${val}`);
                // 重新设置当前页码
                this.currentPage  = val;
                this.selectAll();
            },

            handleSelect(key, keyPath) {
                console.log(key, keyPath);
                if(key==2)
                {
                    window.location.href='stock.html';
                }
                if(key==3)
                {
                    window.location.href='goods.html';
                }

                if(key==4)
                {
                    window.location.href='invoice.html';
                }
            }
        }
    })
</script>
</html>